<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="staffTitle">{{ deviceTitle }}</span>
      <div class="btn">
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="addDeviceInfo">提交</el-button>
      </div>
    </div>

    <div class="device_info two-columns">
      <div class="title">设备进场</div>
      <div class="upload-pic">
        <span>设备图片：</span>
        <div class="editor-after">
          <div class="img-width">
            <div style="position: relative; display: flex;" v-for="(item, index) in deviceImage" :key="index">
              <el-image class="plan-image" :src="item" fit="cover" :preview-src-list="deviceImage"></el-image>
              <i class="el-icon-remove remove-icon" @click="delDevicePic(index)"></i>
            </div>
            <el-upload
              action="#"
              accept="image/png, image/jpeg, image/jpg"
              :show-file-list="false"
              :on-change="uploadDevicePic"
              :auto-upload="false">
              <div class="upload" v-show="deviceImage.length < 1">
                <i class="el-icon-plus"></i>
              </div>
            </el-upload>
          </div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M！</div>
        </div>
      </div>
      <div class="basic_info" style="margin-top: 10px;">
        <!-- 左侧信息 -->
        <div class="left-column">
          <div class="info_box">
            <span class="txt">检测单位：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.unit" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">标段：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="formData.bidSection" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in biaoduan"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="info_box">
            <span class="txt">承包单位：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.contractingUnit" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">备案日期：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.recordTime"
              value-format="yyyy-MM-dd"
              type="date"
              clearable
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">设备类型：</span>
            <span class="element_color">&nbsp;</span>
            <el-select
              v-model="formData.deviceType"
              size="medium"
              clearable
              class="input_width"
              placeholder="请选择"
              @change="getDeviceType">
              <el-option
                v-for="item in deviceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="info_box">
            <span class="txt">规格型号：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.model" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">设备来源：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="formData.deviceSource" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in deviceSourceList"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="info_box">
            <span class="txt">出租单位：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.lessor" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">安装单位：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.installationUnit" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">安装单位资质：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.qualification" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">登记证书审批日期：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.registrationTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">设备责任人：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.devicePerson" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">定期接地检查：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="formData.inspection" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in jiediExamineList"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
<!--          <div class="info_box">-->
<!--            <span class="txt">维保周期：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-date-picker-->
<!--              class="input_width"-->
<!--              v-model="timeSlot"-->
<!--              type="daterange"-->
<!--              size="medium"-->
<!--              clearable-->
<!--              value-format="yyyy-MM-dd"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期">-->
<!--            </el-date-picker>-->
<!--          </div>-->
          <div class="info_box">
            <span class="txt">报审表编号：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.examinationNumber" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">设备运行状态：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="formData.runningState" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in runningStateList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
<!--          <div class="info_box">-->
<!--            <span class="txt">设备单价：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-input v-model.trim="formData.serviceUnitPrice" size="medium" class="input_width" clearable placeholder="请输入"></el-input>-->
<!--          </div>-->
<!--          <div class="info_box">-->
<!--            <span class="txt">油耗：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-input v-model.trim="formData.consumption" size="medium" class="input_width" clearable placeholder="请输入"></el-input>-->
<!--          </div>-->
        </div>

        <!-- 右侧信息 -->
        <div class="right-column">
          <div class="info_box">
            <span class="txt">进场时间：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.mobilizationTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">验收日期：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.acceptanceTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">检测单位资质：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.unitQualifications" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">监理单位：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.supervisorUnit" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">设备名称：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="formData.deviceCnName" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in deviceNameList"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="info_box">
            <span class="txt">班组：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.team" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">使用地点：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.site" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">生产厂家：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.manufacturer" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">出厂时间：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.deliveryTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">出厂编号：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.factoryNumber" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">相关负责人：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.relevantPerson" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">检查报告编号：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.report" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">登记证书有效期：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="formData.validityTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">设备操作员：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="formData.equipmentOperator" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
<!--          <div class="info_box">-->
<!--            <span class="txt">单位：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-select v-model="formData.company" size="medium" filterable class="input_width" placeholder="请选择">-->
<!--              <el-option-->
<!--                v-for="item in unitList"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.label">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="info_box" style="display: flex; align-items: center;">-->
<!--            <span class="txt">维保提醒：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <div class="input_width" style="margin-left: 10px;">-->
<!--              <el-switch v-model="guaranteeStatus" active-color="#13ce66" @change="switchChange"></el-switch>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="info_box" v-show="guaranteeStatus">-->
<!--            <span class="txt">推送人：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-autocomplete-->
<!--              class="input_width"-->
<!--              v-model="formData.username"-->
<!--              clearable-->
<!--              size="medium"-->
<!--              :fetch-suggestions="querySearch"-->
<!--              placeholder="请输入"-->
<!--              :trigger-on-focus="false"-->
<!--              @select="handleSelect"-->
<!--            ></el-autocomplete>-->
<!--          </div>-->
<!--          <div class="info_box" v-show="guaranteeStatus">-->
<!--            <span class="txt">手机号码：</span>-->
<!--            <span class="element_color">&nbsp;</span>-->
<!--            <el-input class="input_width" size="medium" v-model="formData.userTel" readonly placeholder="输入推送人自动匹配"></el-input>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    <div class="wire"></div>



    <div class="device_info two-columns">
      <div class="title">设备验收</div>
      <div class="upload-pic textarea-wrap">
        <span>验收意见及结论：</span>
        <el-input
          type="textarea"
          class="textarea"
          :rows="2"
          placeholder="请输入内容"
          maxlength="100"
          show-word-limit
          v-model="form.opinion">
        </el-input>
      </div>
      <div class="basic_info basic-bottom">
        <!-- 左侧信息 -->
        <div class="left-column">
          <div class="info_box">
            <span class="txt">处理人：</span>
            <span class="element_color">&nbsp;</span>
            <el-input v-model.trim="form.operator" size="medium" class="input_width" clearable placeholder="请输入"></el-input>
          </div>
          <div class="info_box">
            <span class="txt">是否通过：</span>
            <span class="element_color">&nbsp;</span>
            <el-select v-model="form.handleState" size="medium" clearable class="input_width" placeholder="请选择">
              <el-option
                v-for="item in yanshou"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="info_box">
            <span class="txt">设计文件：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in designDocument" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 1)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadDesignFile"
                  :auto-upload="false">
                  <div class="upload" v-show="designDocument.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">安装单位资质证书复印件：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in installationUnits" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 2)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadCertificate"
                  :auto-upload="false">
                  <div class="upload" v-show="installationUnits.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">设备操作规程使用说明：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in instruction" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 3)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadInstructions"
                  :auto-upload="false">
                  <div class="upload" v-show="instruction.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">监督检验证明：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in inspectionCertificates" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 4)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadCheckout"
                  :auto-upload="false">
                  <div class="upload" v-show="inspectionCertificates.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">设备生产(制造)许可证：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in licences" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id,5)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadChange"
                  :auto-upload="false">
                  <div class="upload" v-show="licences.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">购买合同：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in purchaseContracts" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 6)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadContract"
                  :auto-upload="false">
                  <div class="upload" v-show="purchaseContracts.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧信息 -->
        <div class="right-column">
          <div class="info_box">
            <span class="txt">处理时间：</span>
            <span class="element_color">&nbsp;</span>
            <el-date-picker
              class="input_width"
              size="medium"
              v-model="form.handleTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="info_box">
            <span class="txt">产品质量合格证明：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in certificates" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 7)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadProductQuality"
                  :auto-upload="false">
                  <div class="upload" v-show="certificates.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">检测单位资质证书复印件：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in testingUnits" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 8)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="uploaddelDetectionUnit"
                  :auto-upload="false">
                  <div class="upload" v-show="testingUnits.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">维保说明：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in maintenanceInstruction" :key="index+1">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 9)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="uploadMaintain"
                  :auto-upload="false">
                  <div class="upload" v-show="maintenanceInstruction.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">使用登记证书：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in certificateRegistrations" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 10)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="uploadRegister"
                  :auto-upload="false">
                  <div class="upload" v-show="certificateRegistrations.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">租赁协议：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in leaseAgreements" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 11)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="uploadLeaseProtocol"
                  :auto-upload="false">
                  <div class="upload" v-show="leaseAgreements.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="info_box">
            <span class="txt">检测单位检测报告：</span>
            <span class="element_color">&nbsp;</span>
            <div class="editor-after">
              <div class="img-width">
                <div style="position: relative; display: flex;" v-for="(item, index) in reports" :key="index">
                  <el-image class="plan-image" :src="item.url" fit="cover"></el-image>
                  <i class="el-icon-remove remove-icon" @click="delCheckoutPic(index, item.id, 12)"></i>
                </div>
                <el-upload
                  action="#"
                  accept="image/png, image/jpeg, image/jpg"
                  :show-file-list="false"
                  :on-change="onUploadReport"
                  :auto-upload="false">
                  <div class="upload" v-show="reports.length < 8">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../util/httpInterface"
import HttpConfig from "../../util/httpConfig"

export default {
  components: {},
  data() {
    return {
      deviceTitle: "添加进场登记",
      id: 0,
      unitList: [
        { value: '1', label: 'L/小时' },
        { value: '2', label: 'L/100公里' }
      ],
      biaoduan: [
        { value: '1', label: 'D1' },
        { value: '2', label: 'D2' },
      ],
      deviceTypeList: [
        { value: '1-1', label: '一般设备' },
        { value: '1-2', label: '主要设备' },
        { value: '1-3', label: '特种设备' },
        { value: '1-4', label: '关键设备' },
      ],
      deviceSourceList: [
        { value: '1', label: '自有' },
        { value: '2', label: '租凭' },
      ],
      jiediExamineList: [
        { value: '1', label: '需要定期检查' },
        { value: '2', label: '不需要定期检查' },
      ],
      yanshou: [
        { value: '1', label: '通过' },
        { value: '2', label: '拒绝' },
      ],
      deviceNameList: [],
      runningStateList: [
        { value: '0', label: '离线' },
        { value: '1', label: '在线' },
      ],
      timeSlot: [],
      deviceImage: [],
      licences: [],
      reports: [],
      purchaseContracts: [],
      designDocument: [],
      installationUnits: [],
      instruction: [],
      inspectionCertificates: [],
      certificates: [],
      testingUnits: [],
      maintenanceInstruction: [],
      certificateRegistrations: [],
      leaseAgreements: [],
      imageUrl: null,
      guaranteeStatus: false,
      // 接受图片的数组
      designDocumentArr: [],
      certificatesArr: [],
      installationUnitsArr: [],
      testingUnitsArr: [],
      instructionArr: [],
      maintenanceInstructionArr: [],
      inspectionCertificatesArr: [],
      certificateRegistrationsArr: [],
      licencesArr: [],
      leaseAgreementsArr: [],
      purchaseContractsArr: [],
      reportsArr: [],
      formData: {
        unit: "",
        bidSection: "",
        contractingUnit: "",
        recordTime: "",
        deviceType: "",
        model: "",
        deviceSource: "",
        lessor: "",
        installationUnit: "",
        qualification: "",
        registrationTime: "",
        devicePerson: "",
        inspection: "",
        examinationNumber: "",
        serviceUnitPrice: "",
        consumption: "",
        username: "",
        mobilizationTime: "",
        acceptanceTime: "",
        unitQualifications: "",
        supervisorUnit: "",
        deviceCnName: "",
        team: "",
        site: "",
        manufacturer: "",
        deliveryTime: "",
        factoryNumber: "",
        relevantPerson: "",
        report: "",
        validityTime: "",
        equipmentOperator: "",
        company: "",
        userTel: "",
        runningState: "1"
      },
      form: {
        opinion: "",
        operator: "",
        handleState: "",
        handleTime: ""
      },
      imgParams: {}
    };
  },

  methods: {
    // 返回
    returnPage() {
      this.$parent.$data.showPage = 0;
      this.$parent.refreshListData();
    },

    show(id) {
      this.guaranteeStatus = false;
      this.id = 0;
      this.timeSlot = [];
      this.licences = [];
      this.deviceImage = [];
      this.reports = [];
      this.purchaseContracts = [];
      this.designDocument = [];
      this.installationUnits = [];
      this.instruction = [];
      this.inspectionCertificates = [];
      this.certificates = [];
      this.testingUnits = [];
      this.maintenanceInstruction = [];
      this.certificateRegistrations = [];
      this.leaseAgreements = [];
      // 接受图片的数组
      this.designDocumentArr = [];
      this.certificatesArr = [];
      this.installationUnitsArr = [];
      this.testingUnitsArr = [];
      this.instructionArr = [];
      this.maintenanceInstructionArr = [];
      this.inspectionCertificatesArr = [];
      this.certificateRegistrationsArr = [];
      this.licencesArr = [];
      this.leaseAgreementsArr = [];
      this.purchaseContractsArr = [];
      this.reportsArr = [];
      this.formData = {
        unit: "",
        bidSection: "",
        contractingUnit: "",
        recordTime: "",
        deviceType: "",
        model: "",
        deviceSource: "",
        lessor: "",
        installationUnit: "",
        qualification: "",
        registrationTime: "",
        devicePerson: "",
        inspection: "",
        examinationNumber: "",
        serviceUnitPrice: "",
        consumption: "",
        username: "",
        mobilizationTime: "",
        acceptanceTime: "",
        unitQualifications: "",
        supervisorUnit: "",
        deviceCnName: "",
        team: "",
        site: "",
        manufacturer: "",
        deliveryTime: "",
        factoryNumber: "",
        relevantPerson: "",
        report: "",
        validityTime: "",
        equipmentOperator: "",
        company: "",
        userTel: "",
        entryStatus: 1,   // 进出场状态  1进场 0退场
        runningState: "1"
      };
      this.form = {
        opinion: "",
        operator: "",
        handleState: "",
        handleTime: ""
      };
      if (id != undefined) {
        this.deviceTitle = "修改进场登记";
        this.id = id;
        this.getDeviceInfo(id);
      } else {
        this.deviceTitle = "添加进场登记";
      }
      this.getTendersInfo();
    },

    // 获取标段信息列表数据
    getTendersInfo() {
      let _this = this
      var params = {
        page: 1,
        size: 100
      }
      HttpInterface.requestGet(this, HttpInterface.URL_BINDSECTION_FINDPAGE, params, function (res) {
        var data = res.data;
        if (data.success) {
          let rows = data.other.rows;
          let arr = [];
          rows.forEach(item => {
            arr.push({
              value: item.id,
              label: item.name
            })
          })
          _this.biaoduan = arr;
        }
      }, null)
    },

    getDeviceType() {
      this.formData.deviceCnName = "";
      var _this = this
      var params = {
        page: 1,
        size: 100,
        deviceType: this.formData.deviceType
      }
      HttpInterface.requestGet(this,HttpInterface.URL_DEVICETYPE_FINDPAGE,params,function (res) {
        var data = res.data
        if (data.success) {
          let rows = data.other.rows;
          let arr = [];
          rows.forEach(item => {
            arr.push({
              value: item.id,
              label: item.deviceCnName
            })
          })
          _this.deviceNameList = arr;
        } else {
          _this.errorMessage(data.msg);
        }
      },function () {
        _this.errorMessage('加载失败！');
      })
    },

    // 获取数据详情
    getDeviceInfo (id) {
      let _this = this;
      let parmas = {
        id: id
      }
      HttpInterface.requestGet(this, HttpInterface.URL_GET_BY_MECHANICAL_DEVICEID, parmas, function (response) {
        let data = response.data;
        if (data.success) {
          let dataInfo = data.other.mechanicalDevice;
          let result = data.other.acceptanceCheck[0];
          if (dataInfo.startTime && dataInfo.endTime) {
            _this.timeSlot.push(dataInfo.startTime.slice(0, 10));
            _this.timeSlot.push(dataInfo.endTime.slice(0, 10));
          }
          dataInfo.runningState = dataInfo.runningState + "";
          _this.guaranteeStatus = dataInfo.guaranteeStatus == 1 ? true : false;
          _this.formData = dataInfo;
          _this.form = result;
          if (dataInfo.deviceImage) {
            let arr = [];
            arr.push(HttpConfig.serverUrl + dataInfo.deviceImage);
            _this.deviceImage = arr;
          }
          _this.showImageInfo(result);
        }
      }, null)
    },

    // 渲染图片
    showImageInfo(result) {
      for (let i = 0; i < result.licences.length; i++) {
        result.licences[i].url = HttpConfig.serverUrl + result.licences[i].url;
      }
      for (let i = 0; i < result.reports.length; i++) {
        result.reports[i].url = HttpConfig.serverUrl + result.reports[i].url;
      }
      for (let i = 0; i < result.purchaseContracts.length; i++) {
        result.purchaseContracts[i].url = HttpConfig.serverUrl + result.purchaseContracts[i].url;
      }
      for (let i = 0; i < result.designDocument.length; i++) {
        result.designDocument[i].url = HttpConfig.serverUrl + result.designDocument[i].url;
      }
      for (let i = 0; i < result.installationUnits.length; i++) {
        result.installationUnits[i].url = HttpConfig.serverUrl + result.installationUnits[i].url;
      }
      for (let i = 0; i < result.instruction.length; i++) {
        result.instruction[i].url = HttpConfig.serverUrl + result.instruction[i].url;
      }
      for (let i = 0; i < result.inspectionCertificates.length; i++) {
        result.inspectionCertificates[i].url = HttpConfig.serverUrl + result.inspectionCertificates[i].url;
      }
      for (let i = 0; i < result.certificates.length; i++) {
        result.certificates[i].url = HttpConfig.serverUrl + result.certificates[i].url;
      }
      for (let i = 0; i < result.testingUnits.length; i++) {
        result.testingUnits[i].url = HttpConfig.serverUrl + result.testingUnits[i].url;
      }
      for (let i = 0; i < result.maintenanceInstruction.length; i++) {
        result.maintenanceInstruction[i].url = HttpConfig.serverUrl + result.maintenanceInstruction[i].url;
      }
      for (let i = 0; i < result.certificateRegistrations.length; i++) {
        result.certificateRegistrations[i].url = HttpConfig.serverUrl + result.certificateRegistrations[i].url;
      }
      for (let i = 0; i < result.leaseAgreements.length; i++) {
        result.leaseAgreements[i].url = HttpConfig.serverUrl + result.leaseAgreements[i].url;
      }
      this.licences = result.licences;
      this.reports = result.reports;
      this.purchaseContracts = result.purchaseContracts;
      this.designDocument = result.designDocument;
      this.installationUnits = result.installationUnits;
      this.instruction = result.instruction;
      this.inspectionCertificates = result.inspectionCertificates;
      this.certificates = result.certificates;
      this.testingUnits = result.testingUnits;
      this.maintenanceInstruction = result.maintenanceInstruction;
      this.certificateRegistrations = result.certificateRegistrations;
      this.leaseAgreements = result.leaseAgreements;
    },

    // 维保提醒开关
    switchChange() {
      if (!this.guaranteeStatus) {
        this.formData.userTel = "";
        this.formData.username = "";
      }
    },

    // 推送人查询
    querySearch(value, callback) {
      let _this = this;
      let params = {
        userName: value
      }
      HttpInterface.requestGet(this, HttpInterface.URL_FIND_USER_BY_USER_NAME, params, function (res) {
        let data = res.data;
        if (data.success == true) {
          _this.remindNameList = data.other;
          _this.remindNameList.forEach(item => {
            item.value = item.userName + "  --  " + item.userTel;
          })
          callback(_this.remindNameList);
        }
      }, null)
    },

    handleSelect(item) {
      this.formData.username = item.userName;
      this.formData.userTel = item.userTel;
    },

    // 添加进场信息
    addDeviceInfo () {
      let _this = this;
      let params = {
        mechanicalDevice: this.formData,
        acceptanceCheck: this.form
      }
      // params.mechanicalDevice.startTime = this.timeSlot[0];
      // params.mechanicalDevice.endTime = this.timeSlot[1];
      params.mechanicalDevice.deviceImage = this.imageUrl;
      // params.mechanicalDevice.guaranteeStatus = this.guaranteeStatus ? 1 : 0; // 维保提醒 true为1  false为0
      params.acceptanceCheck.designDocument = this.designDocumentArr;
      params.acceptanceCheck.certificates = this.certificatesArr;
      params.acceptanceCheck.installationUnits = this.installationUnitsArr;
      params.acceptanceCheck.testingUnits = this.testingUnitsArr;
      params.acceptanceCheck.instruction = this.instructionArr;
      params.acceptanceCheck.maintenanceInstruction = this.maintenanceInstructionArr;
      params.acceptanceCheck.inspectionCertificates = this.inspectionCertificatesArr;
      params.acceptanceCheck.certificateRegistrations = this.certificateRegistrationsArr;
      params.acceptanceCheck.licences = this.licencesArr;
      params.acceptanceCheck.leaseAgreements = this.leaseAgreementsArr;
      params.acceptanceCheck.purchaseContracts = this.purchaseContractsArr;
      params.acceptanceCheck.reports = this.reportsArr;
      if (this.id != 0) {
        params.mechanicalDevice.id = this.id;
      }
      let url = this.id == 0 ? HttpInterface.URL_INSERT_MECHANICAL_DEVICE : HttpInterface.URL_UPDATE_MECHANICAL_DEVICE;
      HttpInterface.requestPost(this, url, params, function (res) {
        let data = res.data;
        if (data.success) {
          _this.successMessage(data.msg);
          _this.returnPage();
          _this.$parent.refreshListData();
        } else {
          _this.errorMessage("添加失败！");
        }
      }, null, false)
    },

    beforeAvatarUpload(file) {
      let isJPG = null;
      let isLt2M = file.size / 1024 / 1024 < 2;
      if (file.type) {
        isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
      } else {
        isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/png';
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/png 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },

    // 删除设备验收的图片
    delCheckoutPic(index, id, type) {
      if (id == undefined) {
        this.delPicInfo(index, id, type);
        return;
      }
      let _this = this;
      let params = {
        id: id
      };
      HttpInterface.requestGet(this, HttpInterface.URL_DELETE_FILE, params, function (res) {
        let data = res.data;
        if (data.success) {
          _this.delPicInfo(index, id, type);
        } else {
          _this.errorMessage("图片删除失败！");
        }
      }, null)
    },

    delPicInfo(index, id, type) {
      switch (type) {
        case 1:
          this.designDocument.splice(index, 1);  // 删除设计文件照片
          break;
        case 2:
          this.installationUnits.splice(index, 1);  // 删除安装单位资质证书复印件照片
          break;
        case 3:
          this.instruction.splice(index, 1);  // 删除设备操作规程使用说明照片
          break;
        case 4:
          this.inspectionCertificates.splice(index, 1);   // 删除监督检验证明照片
          break;
        case 5:
          this.licences.splice(index, 1);   // 删除设备生产(制造)许可证照片
          break;
        case 6:
          this.purchaseContracts.splice(index, 1);  // 删除购买合同照片
          break;
        case 7:
          this.certificates.splice(index, 1);   // 删除产品质量合格证明照片
          break;
        case 8:
          this.testingUnits.splice(index, 1);   // 删除检测单位资质证书复印件照片
          break;
        case 9:
          this.maintenanceInstruction.splice(index, 1);   // 删除维保说明照片
          break;
        case 10:
          this.certificateRegistrations.splice(index, 1);   // 删除使用登记证书照片
          break;
        case 11:
          this.leaseAgreements.splice(index, 1);    // 删除租赁协议照片
          break;
        case 12:
          this.reports.splice(index, 1);    // 删除检测报告照片
          break;
      }
    },

    // 删除设备图片
    delDevicePic(index) {
      this.deviceImage.splice(index, 1);
    },

    // 上传设备图片
    uploadDevicePic(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      let params = {};
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        if (_this.deviceImage.length < 1) {
          _this.deviceImage.push(src);
          params.image = src;
        }
        HttpInterface.requestPost(_this, HttpInterface.URL_SAVE_DEVICE_FILE, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.imageUrl = data.other;
            console.log("设备图片上传成功");
          }
        }, null, true)
      }
    },

    // 上传设计文件照片
    onUploadDesignFile(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.designDocumentArr.push(src);
        if (_this.designDocument.length <= 8) {
          _this.designDocument.push({
            url: src
          });
        }
      }
    },

    // 上传安装单位资质证书复印件照片
    onUploadCertificate(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.installationUnitsArr.push(src);
        if (_this.installationUnits.length <= 8) {
          _this.installationUnits.push({
            url: src
          });
        }
      }
    },

    // 上传设备操作规程使用说明照片
    onUploadInstructions(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.instructionArr.push(src);
        if (_this.instruction.length <= 8) {
          _this.instruction.push({
            url: src
          });
        }
      }
    },

    // 上传监督检验证明照片
    onUploadCheckout(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.inspectionCertificatesArr.push(src);
        if (_this.inspectionCertificates.length <= 8) {
          _this.inspectionCertificates.push({
            url: src
          });
        }
      }
    },

    // 上传设备生产(制造)许可证照片
    onUploadChange(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.licencesArr.push(src);
        if (_this.licences.length <= 8) {
          _this.licences.push({
            url: src
          });
        }
      }
    },

    // 上传购买合同照片
    onUploadContract(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.purchaseContractsArr.push(src);
        if (_this.purchaseContracts.length <= 8) {
          _this.purchaseContracts.push({
            url: src
          });
        }
      }
    },

    // 上传产品质量合格证明照片
    onUploadProductQuality(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.certificatesArr.push(src);
        if (_this.certificates.length <= 8) {
          _this.certificates.push({
            url: src
          });
        }
      }
    },

    // 上传检测单位资质证书复印件照片
    uploaddelDetectionUnit(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.testingUnitsArr.push(src);
        if (_this.testingUnits.length <= 8) {
          _this.testingUnits.push({
            url: src
          });
        }
      }
    },

    // 上传维保说明照片
    uploadMaintain(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.maintenanceInstructionArr.push(src)
        if (_this.maintenanceInstruction.length <= 8) {
          _this.maintenanceInstruction.push({
            url: src
          });
        }
      }
    },

    // 上传使用登记证书照片
    uploadRegister(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.certificateRegistrationsArr.push(src);
        if (_this.certificateRegistrations.length <= 8) {
          _this.certificateRegistrations.push({
            url: src
          });
        }
      }
    },

    // 上传租赁协议照片
    uploadLeaseProtocol(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.leaseAgreementsArr.push(src);
        if (_this.leaseAgreements.length <= 8) {
          _this.leaseAgreements.push({
            url: src
          });
        }
      }
    },

    // 上传检测报告图片
    onUploadReport(file) {
      var _this = this;
      if (!this.beforeAvatarUpload(file)) {
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function(e) {
        const src = e.target.result;
        _this.reportsArr.push(src);
        if (_this.reports.length <= 8) {
          _this.reports.push({
            url: src
          });
        }
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .el_input {
    width: 260px;
  }

  .content_padding{
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;

    .device_info{
      margin-top: 30px;

      .upload-pic{
        margin-left: 88px;
        padding: 30px 0 0 60px;
        display: flex;

        span{
          font-size: 14px;
          margin-right: 20px;
          margin-top: 4px;
        }

        .editor-after{
          margin: 0;
          display: flex;
          flex-direction: column;

          .el-upload__tip{
            margin-left: 5px;
          }
        }

        &.textarea-wrap{
          margin-left: 106px;
          margin-top: 30px;
          padding: 0;

          .txt{
            width: 114px;
            display: inline-block;
            text-align: right;
          }

          .textarea{
            width: 1050px;
          }
        }
      }

      &.two-columns{
        .left-column{
          margin-left: 20px;
        }

        .left-column,
        .right-column{
          width: 48%;

          .info_box .input_width{
            width: 400px;
          }
        }
      }

      .title{
        width: 100%;
        font-weight: bold;
        line-height: 50px;
        display: inline-block;
        border-bottom: 1px solid rgb(236, 236, 236);
      }

      .basic_info{
        display: flex;
        flex-wrap: wrap;

        &.basic-bottom {
          margin-bottom: 30px;
        }

        .info_box{
          margin-right: 30px;
          margin-top: 24px;

          .txt{
            font-size: 14px;
            width: 200px;
            display: inline-block;
            text-align: right;
          }

          .element_color{
            color: #f44336;
            font-size: 12px;
            margin-right: 4px;
          }

          .input_width{
            width: 260px;
          }
        }
      }
    }
  }

  .wire{
    width: 100%;
    height: 1px;
    background: rgb(236, 236, 236);
    margin-top: 30px;
  }

  /* 上传图片 */
  .editor-after{
    margin-left: 216px;
    margin-top: -28px;
    display: flex;
    flex-wrap: wrap;

    .img-width{
      display: flex;
      flex-wrap: wrap;

      .plan-image,
      .upload{
        width: 100px;
        height: 100px;
        border-radius: 4px;
        margin: 6px;
        border: 1px solid #cbcbd0;
        box-sizing: border-box;
      }

      .remove-icon{
        position: absolute;
        top: -5px;
        right: -4px;
        z-index: 99;
        font-size: 18px;
        color: rgb(247, 74, 74);
        border: 1px solid #fff;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
      }

      .upload{
        border: 1px dashed #cbcbd0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        color: #999999;
        cursor: pointer;

        &:hover{
          border: 1px dashed #409EFF;
          background: rgb(246, 250, 255);
          color: #409EFF;
          transition: all 0.3s;
        }
      }
    }
  }

  .el-button--text >>> .iconfanhui{
    margin-right: 4px;
    font-size: 18px;
    vertical-align: -2px;
  }
</style>

